<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--引入jquery的库文件-->
        <script src="../js/jquery-3.4.1.min.js"></script>
        <script>
            function f1(){
                console.log("f1函数");
            }

            // window.onload=function(){
            //     var btn2=document.getElementById("btn2");
            //     btn2.onclick=function () {
            //         console.log("动态绑定事件");
            //     };
            // };

            // console.log($);//表示一个函数名
            // jquery函数的调用者必须是jquery对象，而不能是DOM对象
            // DOM对象->jQuery对象  $(DOM对象)

            //ready文档就绪方法。作用类似于window.onload
            // $(document).ready(function(){
            //     $("#btn2").click(function(){
            //         console.log(111);
            //     });
            // });


            //简化版
            $(function(){
                // jquery对象.事件名(函数)
                $("#btn2").click(function(){
                    // DOM对象.value
                    // console.log(this.value);

                    // DOM对象.value=值

                    // jQuery对象.val()
                    console.log( $("#btn2").val());

                    // jQuery对象.val(值)设置value值
                    $("#btn2").val("我是一个人");
                });
                $("div").click(function () {
                    // DOM对象.innerHTML
                    // console.log(this.innerHTML);

                    // DOM对象.innerHTML=值  设置文本内容
                    // this.innerHTML="哈哈哈哈";

                    //jQuery对象.html()
                    // console.log( $("div").html());

                    // jQuery对象.html()设置文本内容
                    $("div").html("嘻嘻嘻");
                });


            });



        </script>
    </head>
    <body>
        <input type="button" value="我是按钮" onclick="f1()">
        <input type="button" value="我是按钮2" id="btn2">
        <div>我是div</div>
    </body>
</html>